<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName('/import-create/list')">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>导入创建</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <div class="importByExcel-container">
            <div class="i-top" :class="active>0?'i-top-next':''">
                <el-steps :active="active" class="step-box" finish-status="success" process-status="finish">
                    <el-step >
                        <span slot="description">选择Excel</span>
                    </el-step>
                    <el-step >
                        <span slot="description">设计表格</span>
                    </el-step>
                    <el-step >
                        <span slot="description">预览数据</span>
                    </el-step>
                    <el-step >
                        <span slot="description">导入</span>
                    </el-step>
                </el-steps>
                <div class="i-t-info" v-if="active === 0">
                    <p>· 支持xls、xlsx格式文件</p>
                    <p>· 文件最大支持100列，单次导入最多10000行数据，文件大小100M，超出请分批导入。</p>
                    <p>· 通过Excel导入数据并新建的表单支持大部分控件类型，子表和特殊控件类型请在表单设计中手动完成</p>
                    <p>· 导入文件请参考示例模板查看示例
                    </p>
                    <img src="~@/assets/example01.png" alt="" class="map-location" width="100%">
                </div>
                <div class="i-t-btn" v-else>
                    <el-button
                        size="mini"
                        @click="handleActive('prev')"
                    >
                        上一步
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleActive('next')"
                        v-if="active === 1"
                    >
                        下一步
                    </el-button>
                    <el-button
                        size="mini"
                        type="primary"
                        @click="handleImport"
                        v-else
                    >
                        导入
                    </el-button>
                </div>
            </div>
            <div class="i-bottom" :class="active>0?'i-bottom-next':''">
                <template v-if="active === 0">
                    <up-load-drag
                        @onSuccess="onUpdate"
                        :limit="1"
                        :customList="true"
                        :accept="`.xlsx,.xls`"
                        type="temporary"
                        fileType="xls"
                        class="dray-box"
                    >
                    </up-load-drag>
                </template>
                <template v-else-if="active === 1">
                    <detail-page2 ref="page2" :data="excelData" :formName="formName" :excelPath="excelPath" @success="verifySuccess" :excelAddData="excelAddData" ></detail-page2>
                </template>
                <template v-else-if="active === 2">
                    <detail-page3 :data="excelData" :excelAddData="excelAddData" ref="page3" :excelPath="excelPath"></detail-page3>
                </template>
            </div>
        </div>


    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import UpLoadDrag from "@/components/upload-drag/index.vue";
import DetailPage2 from '@/views/import-create/src/components/detail-page-2.vue';
import DetailPage3 from '@/views/import-create/src/components/detail-page-3.vue';

@Component({
    name: "ImportCreateImportNotAlive",
    components: {
        UpLoadDrag,
        DetailPage3,
        DetailPage2
    }
})
export default class ImportCreateImport extends Vue {
    excelData: any = null
    excelAddData: any = null
    active = 0
    formName= ''
    excelPath= ""


    async onUpdate(obj: {
        path: string;
        formName: string;
    }) {
        const rs = await this.$server["importCreate/analyzingExcel"]({
            data: {
                excelPath: obj.path
            }
        });
        let formName = obj.formName;
        formName = formName.slice(0, formName.lastIndexOf('.')); // 文件名称去掉.后缀
        if (rs.data.code === 200) {
            this.excelData = rs.data.data;
            this.formName = formName;
            this.excelPath = obj.path;
            this.active = 1;
        } else {
            this.$message.error(rs.data.message || "接口请求错误!");
        }
    }

    handleActive(type: string) {
        if (type === 'prev') {
            this.active -= 1;
            if (this.active === 0) {
                this.excelAddData = null;
                this.excelPath = '';
                this.formName = '';
            }
        } else {
            if (this.active === 1) {
                (this.$refs.page2 as any).next();
            }
        }
    }


    verifySuccess(data: any) {
        this.excelAddData = data;
        this.active = 2;
    }

    handleImport() {
        (this.$refs.page3 as any).handleImport();
    }
}
</script>
<style lang="scss" scoped>
::v-deep{
    .page-base-body{
        width: 100%!important;
        height: calc(100% - 50px)!important;
        overflow: hidden!important;
    }
    .el-step.is-horizontal{
        padding-right: 6px;
    }
    .el-step__icon{
        width: 16px;
        height: 16px;
        font-size: 12px;
        position: relative;
        top: -2px;
    }
    .el-step__main{
        position: absolute;
        left: 16px;
        top: 0;
        height: 21px;
        background-color: #fff;
        flex-wrap: nowrap;
        line-height: 1;
        display: flex;
        align-items: center;
        padding: 0 6px;
        .el-step__description{
            margin: 0;
        }

        span{
            height: 21px;
            white-space:nowrap;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
    }

    .el-step__description.is-success{
       color: #de2728;
    }
    .el-step__head.is-success {
        color: #de2728;
        border-color:  #de2728;
    }
}

.importByExcel-container{
    height: 100%;
    .i-top{
        height: 390px;
        background-color: #fff;
        .step-box{
            margin: 0 auto;
            padding: 20px 0;
            width: 650px;
            height: 54px;
            display: flex;
        }
        .i-t-info p{
            padding-left: 20px;
            font-weight: 400;
            font-size: 14px;
            color: rgb(16, 16, 16);
            line-height: 1;
            margin: 0 0 6px 0;
        }
        .i-t-info img{
            margin: 0 10px;
            max-width: calc(100% - 20px);
           height: 245px;
        }
        .blue{
            color: #de2728;
        }
        .pointer{
            cursor: pointer;
        }

    }

    .i-top-next.i-top{
        height: 67px;
        position: relative;
        display: flex;
        align-items: center;
        .i-t-btn{
            height: 28px;
            padding-right: 20px;
        }
    }
    .i-bottom-next.i-bottom{
        height: calc(100% - 75px);
    }
    .i-bottom{
        margin-top: 10px;
        height: calc(100% - 390px);
        background-color: #fff;
        .dray-box, .upload-demo, /deep/ .el-upload, /deep/.el-upload-dragger{
            width: 100%;
            height: 100%;
        }
        /deep/.el-upload-dragger{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    }
}

</style>
